<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="icon" href="./favicon.ico" sizes="any">
    <link rel="icon" type="image/png" href="./favicon-16x16.png" sizes="16x16">
    <link rel="icon" type="image/png" href="./favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="./favicon-48x48.png" sizes="48x48">
    <link rel="manifest" href="./site.webmanifest">
    <link rel="icon" type="image/png" href="./android-chrome-192x192.png" sizes="192x192">
    <link rel="icon" type="image/png" href="./android-chrome-512x512.png" sizes="512x512">
    <link rel="apple-touch-icon" href="./apple-touch-icon.png">
    <link rel="mask-icon" href="./safari-pinned-tab.svg" color="#5bbad5">
    <link rel="icon" href="./favicon.svg" type="image/svg+xml">
    <title>天天开心~</title>
    <script src="./anime.min.js"></script>
    <style>
        * {
            user-select: none;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            overflow: hidden;
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            touch-action: none;
            font-family: 'Arial', 'Microsoft YaHei', sans-serif;
        }

        #canvas-container {
            position: relative;
            width: 100%;
            height: 100%;
        }

        canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .panel {
            position: absolute;
            padding: 15px 20px;
            border-radius: 12px;
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            color: white;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            transform-origin: center;
            opacity: 0;
            overflow: hidden;
            word-wrap: break-word;
            line-height: 1.4;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            border: 2px solid rgba(255, 255, 255, 0.3);
            writing-mode: horizontal-tb;
            white-space: normal;
            z-index: 10;
            will-change: transform, opacity;
        }

        /* 移动端适配 */
        @media (max-width: 768px) {
            .panel {
                font-size: 14px;
                padding: 12px 16px;
            }
        }

        @media (max-width: 480px) {
            .panel {
                font-size: 12px;
                padding: 10px 12px;
            }
        }

        .control-panel {
            position: absolute;
            top: 20px;
            right: 20px;
            background: rgba(255, 255, 255, 0.9);
            padding: 15px;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            z-index: 100;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        button {
            background: #4ECDC4;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
            margin: 0;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
        }

        button:hover {
            background: #3db8b0;
            transform: translateY(-2px);
        }

        button:active {
            transform: translateY(0);
        }

        .status {
            display: none;
            position: absolute;
            top: 20px;
            left: 20px;
            background: rgba(255, 255, 255, 0.9);
            padding: 10px 15px;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            z-index: 100;
            font-size: 14px;
            font-weight: bold;
        }

        .welcome-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        .modal-content {
            background: white;
            padding: 30px;
            border-radius: 15px;
            text-align: center;
            max-width: 400px;
            width: 90%;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            transform: scale(0);
            opacity: 0;
        }

        .modal-content h2 {
            color: #333;
            margin-bottom: 15px;
        }

        .modal-content p {
            color: #666;
            margin-bottom: 20px;
            line-height: 1.5;
        }

        .modal-buttons {
            display: flex;
            gap: 15px;
            justify-content: center;
        }

        .modal-btn {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s;
        }

        .confirm-btn {
            background: #4ECDC4;
            color: white;
        }

        .cancel-btn {
            background: #f0f0f0;
            color: #333;
        }

        .modal-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        .floating-heart {
            position: absolute;
            font-size: 24px;
            opacity: 0;
            z-index: 5;
            pointer-events: none;
        }
    </style>
</head>

<body>
    <div class="welcome-modal" id="welcomeModal">
        <div class="modal-content" id="modalContent">
            <h2>天天开心~</h2>
            <p>需要播放背景音乐来增强体验吗？</p>
            <div class="modal-buttons">
                <button class="modal-btn confirm-btn" id="confirmMusic">播放音乐</button>
                <button class="modal-btn cancel-btn" id="cancelMusic">不播放音乐</button>
            </div>
        </div>
    </div>

    <div class="control-panel">
        <button id="restartBtn">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                <path
                    d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" />
            </svg>
            重新开始
        </button>
        <button id="pauseBtn">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" />
            </svg>
            暂停/继续
        </button>
    </div>

    <div class="status" id="status">等待开始...</div>

    <div id="canvas-container">
        <canvas id="backgroundCanvas"></canvas>
        <canvas id="heartCanvas"></canvas>
    </div>

    <!-- 音频元素 -->
    <audio id="backgroundMusic" loop>
        <source src="./bgm.mp3" type="audio/mpeg">
        您的浏览器不支持音频元素。
    </audio>

    <script>
        // 获取元素
        const backgroundCanvas = document.getElementById('backgroundCanvas');
        const backgroundCtx = backgroundCanvas.getContext('2d');
        const heartCanvas = document.getElementById('heartCanvas');
        const heartCtx = heartCanvas.getContext('2d');
        const container = document.getElementById('canvas-container');
        const restartBtn = document.getElementById('restartBtn');
        const pauseBtn = document.getElementById('pauseBtn');
        const backgroundMusic = document.getElementById('backgroundMusic');
        const status = document.getElementById('status');
        const welcomeModal = document.getElementById('welcomeModal');
        const modalContent = document.getElementById('modalContent');
        const confirmMusicBtn = document.getElementById('confirmMusic');
        const cancelMusicBtn = document.getElementById('cancelMusic');

        // 设置canvas大小为窗口大小
        function resizeCanvas() {
            backgroundCanvas.width = window.innerWidth;
            backgroundCanvas.height = window.innerHeight;
            heartCanvas.width = window.innerWidth;
            heartCanvas.height = window.innerHeight;
        }

        // 初始化时调整canvas大小，并监听窗口大小变化
        resizeCanvas();
        window.addEventListener('resize', resizeCanvas);

        // 全局变量
        let panels = [];
        let currentPanel = 0;
        let isPaused = false;
        let isHeartComplete = false;
        let isAnimationStarted = false;
        let isScatteringComplete = false;
        const panelShowDelay = 150;

        // 关心的话语集合
        const caringMessages = [
            '每天都要元气满满',
            '好好爱自己',
            '天冷了多穿衣',
            '记得按时吃饭',
            '今天也要开心',
            '你很棒！继续加油',
            '多喝水保持健康',
            '累了就休息一下',
            '明天会更好',
            '我一直在你身边',
            '保持微笑',
            '你是最特别的',
            '一切都会好起来',
            '相信自己',
            '生活很美好',
            '向前看',
            '别太累',
            '照顾好自己',
            '勇敢面对',
            '你是独一无二的',
            '心怀希望',
            '做最好的自己',
            '感恩每一天',
            '保持乐观',
            '享受当下'
        ];

        // 生成随机颜色
        function getRandomColor() {
            const colors = [
                '#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7',
                '#DDA0DD', '#98D8C8', '#F7DC6F', '#BB8FCE', '#85C1E9',
                '#F8C471', '#82E0AA', '#F1948A', '#85C1E9', '#D7BDE2',
                '#A9DFBF', '#F9E79F', '#D2B4DE', '#AED6F1', '#ABEBC6'
            ];
            return colors[Math.floor(Math.random() * colors.length)];
        }

        // 创建浮动爱心
        function createFloatingHearts() {
            for (let i = 0; i < 15; i++) {
                setTimeout(() => {
                    const heart = document.createElement('div');
                    heart.className = 'floating-heart';
                    heart.innerHTML = '❤';
                    heart.style.color = getRandomColor();
                    heart.style.left = Math.random() * 100 + 'vw';
                    heart.style.fontSize = (Math.random() * 20 + 15) + 'px';
                    container.appendChild(heart);

                    // 使用anime.js创建流畅的动画
                    anime({
                        targets: heart,
                        translateY: [-100, -window.innerHeight],
                        translateX: [0, (Math.random() - 0.5) * 200],
                        rotate: [0, Math.random() * 360],
                        opacity: [0.8, 0],
                        scale: [0.5, 1.2],
                        duration: Math.random() * 3000 + 4000,
                        easing: 'easeOutQuad',
                        complete: function () {
                            heart.remove();
                        }
                    });
                }, i * 300);
            }
        }

        // 背景星星类
        class BackgroundStar {
            constructor() {
                this.x = Math.random() * backgroundCanvas.width;
                this.y = Math.random() * backgroundCanvas.height;
                this.size = Math.random() * 2 + 0.5;
                this.speed = Math.random() * 1 + 0.5;
                this.opacity = Math.random() * 0.8 + 0.2;
                this.color = `rgba(255, 255, 255, ${this.opacity})`;
                this.twinkleOffset = Math.random() * Math.PI * 2;
            }

            update(time) {
                this.y += this.speed;
                if (this.y > backgroundCanvas.height) {
                    this.y = -this.size;
                    this.x = Math.random() * backgroundCanvas.width;
                }

                // 添加闪烁效果
                this.opacity = 0.3 + 0.5 * Math.sin(time * 0.002 + this.twinkleOffset);
                this.color = `rgba(255, 255, 255, ${this.opacity})`;
            }

            draw() {
                backgroundCtx.beginPath();
                backgroundCtx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                backgroundCtx.fillStyle = this.color;
                backgroundCtx.fill();
            }
        }

        // 创建背景星星
        const backgroundStars = [];
        for (let i = 0; i < 150; i++) {
            backgroundStars.push(new BackgroundStar());
        }

        // 面板类
        class Panel {
            constructor(x, y, width, height, message) {
                this.x = x;
                this.y = y;
                this.width = width;
                this.height = height;
                this.message = message;
                this.color = getRandomColor();
                this.stars = [];
                this.visible = false;
                this.element = null;
                this.isScattered = false;
                this.targetX = null;
                this.targetY = null;
                this.moving = false;
                this.animation = null;
                this.createPanel();
                this.createStars();
            }

            createPanel() {
                this.element = document.createElement('div');
                this.element.className = 'panel';
                this.element.style.width = `${this.width}px`;
                this.element.style.height = `${this.height}px`;
                this.element.style.left = `${this.x}px`;
                this.element.style.top = `${this.y}px`;
                this.element.style.backgroundColor = this.color;
                this.element.textContent = this.message;
                container.appendChild(this.element);
            }

            createStars() {
                // 为每个面板创建5-10个星星
                const starCount = Math.floor(Math.random() * 6) + 5;
                for (let i = 0; i < starCount; i++) {
                    this.stars.push({
                        x: Math.random() * this.width,
                        y: Math.random() * this.height,
                        size: Math.random() * 2 + 1,
                        speed: Math.random() * 0.15 + 0.05,
                        color: `rgba(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.random() * 0.8 + 0.2})`
                    });
                }
            }

            show() {
                this.visible = true;

                // 使用anime.js创建流畅的显示动画
                anime({
                    targets: this.element,
                    opacity: [0, 1],
                    scale: [0.5, 1],
                    translateY: [20, 0],
                    duration: 800,
                    easing: 'easeOutElastic(1, .8)',
                    delay: Math.random() * 200
                });
            }

            scatter() {
                if (this.isScattered) return;

                this.isScattered = true;

                // 随机生成散开位置，确保在屏幕内
                const padding = 50;
                this.targetX = Math.random() * (window.innerWidth - this.width - padding * 2) + padding;
                this.targetY = Math.random() * (window.innerHeight - this.height - padding * 2) + padding;

                // 使用anime.js创建流畅的散开动画
                anime({
                    targets: this.element,
                    left: this.targetX,
                    top: this.targetY,
                    scale: [1, 1.1],
                    rotate: () => anime.random(-30, 30),
                    duration: 1200,
                    easing: 'easeOutElastic(1, .8)',
                    delay: Math.random() * 300,
                    complete: () => {
                        this.startFloatingAnimation();
                    }
                });
            }

            startFloatingAnimation() {
                this.moving = true;

                // 使用anime.js创建持续的浮动动画
                this.animation = anime({
                    targets: this.element,
                    translateX: () => anime.random(-20, 20),
                    translateY: () => anime.random(-15, 15),
                    rotate: () => anime.random(-5, 5),
                    scale: () => anime.random(0.95, 1.05),
                    duration: () => anime.random(2000, 4000),
                    easing: 'easeInOutSine',
                    direction: 'alternate',
                    loop: true
                });
            }

            update() {
                if (!this.visible) return;

                // 更新星星位置
                for (let star of this.stars) {
                    star.y += star.speed;
                    if (star.y > this.height) {
                        star.y = -star.size;
                        star.x = Math.random() * this.width;
                    }
                }

                // 清除之前的星星
                const starCanvas = this.element.querySelector('canvas');
                if (starCanvas) {
                    this.element.removeChild(starCanvas);
                }

                // 绘制新星星
                const newStarCanvas = document.createElement('canvas');
                newStarCanvas.width = this.width;
                newStarCanvas.height = this.height;
                newStarCanvas.style.position = 'absolute';
                newStarCanvas.style.top = '0';
                newStarCanvas.style.left = '0';
                newStarCanvas.style.pointerEvents = 'none';
                const starCtx = newStarCanvas.getContext('2d');

                for (let star of this.stars) {
                    starCtx.beginPath();
                    starCtx.arc(star.x, star.y, star.size, 0, Math.PI * 2);
                    starCtx.fillStyle = star.color;
                    starCtx.fill();
                }

                this.element.appendChild(newStarCanvas);
            }
        }

        // 生成爱心形状的面板数组
        function generateHeartPanels() {
            const panels = [];
            const centerX = heartCanvas.width / 2;
            const centerY = heartCanvas.height / 2;
            const heartSize = Math.min(heartCanvas.width, heartCanvas.height) * 0.6;

            // 生成爱心形状的点
            const heartPoints = [];
            const numPoints = 300;

            for (let i = 0; i < numPoints; i++) {
                const t = (i / numPoints) * Math.PI * 2;
                const x = 16 * Math.pow(Math.sin(t), 3);
                const y = 13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t);

                // 转换到canvas坐标系并缩放
                const canvasX = centerX + (x * heartSize / 30);
                const canvasY = centerY - (y * heartSize / 30);

                heartPoints.push({
                    x: canvasX,
                    y: canvasY,
                    angle: Math.atan2(canvasY - centerY, canvasX - centerX)
                });
            }

            // 按角度排序，从顶部中间开始（角度为 -Math.PI/2）
            heartPoints.sort((a, b) => {
                let angleA = a.angle < 0 ? a.angle + 2 * Math.PI : a.angle;
                let angleB = b.angle < 0 ? b.angle + 2 * Math.PI : b.angle;

                const startAngle = 3 * Math.PI / 2;
                angleA = (angleA - startAngle + 2 * Math.PI) % (2 * Math.PI);
                angleB = (angleB - startAngle + 2 * Math.PI) % (2 * Math.PI);

                return angleA - angleB;
            });

            // 为每个点创建一个面板
            const panelWidth = Math.max(heartSize / 8, 120);
            const panelHeight = Math.max(heartSize / 12, 60);
            const messageCount = caringMessages.length;

            for (let i = 0; i < heartPoints.length; i += 2) {
                const point = heartPoints[i];
                const message = caringMessages[Math.floor(Math.random() * messageCount)];
                const panel = new Panel(
                    point.x - panelWidth / 2,
                    point.y - panelHeight / 2,
                    panelWidth,
                    panelHeight,
                    message
                );
                panels.push(panel);
            }

            return panels;
        }

        // 初始化函数
        function init() {
            // 清除现有面板
            const existingPanels = container.querySelectorAll('.panel');
            existingPanels.forEach(panel => panel.remove());

            // 生成新面板
            panels = generateHeartPanels();
            currentPanel = 0;
            isPaused = false;
            isHeartComplete = false;
            isScatteringComplete = false;
            status.textContent = '爱心绘制中...';
        }

        // 显示面板的函数
        function showNextPanel() {
            if (isPaused) return;

            if (currentPanel < panels.length) {
                panels[currentPanel].show();
                currentPanel++;
                setTimeout(showNextPanel, panelShowDelay);
            } else if (!isHeartComplete) {
                // 爱心绘制完成
                isHeartComplete = true;
                status.textContent = '爱心绘制完成！面板散开中...';

                // 延迟后开始散开动画
                setTimeout(() => {
                    scatterPanels();
                    status.textContent = '面板随机移动中...';

                    // 标记散开完成
                    setTimeout(() => {
                        isScatteringComplete = true;
                    }, 1500);
                }, 1000);
            }
        }

        // 面板散开函数
        function scatterPanels() {
            panels.forEach(panel => {
                panel.scatter();
            });

            // 创建一些浮动爱心效果
            createFloatingHearts();
        }

        // 背景动画循环
        let lastTime = 0;
        function animateBackground(time) {
            const deltaTime = time - lastTime;
            lastTime = time;

            backgroundCtx.clearRect(0, 0, backgroundCanvas.width, backgroundCanvas.height);

            // 更新和绘制背景星星
            for (let star of backgroundStars) {
                star.update(time);
                star.draw();
            }

            requestAnimationFrame(animateBackground);
        }

        // 面板动画循环
        function animatePanels() {
            if (!isPaused) {
                heartCtx.clearRect(0, 0, heartCanvas.width, heartCanvas.height);

                // 更新所有面板
                for (let panel of panels) {
                    panel.update();
                }
            }

            requestAnimationFrame(animatePanels);
        }

        // 开始动画
        function startAnimation(withMusic) {
            isAnimationStarted = true;

            // 使用anime.js创建模态框消失动画
            anime({
                targets: modalContent,
                scale: 0,
                opacity: 0,
                duration: 500,
                easing: 'easeInOutQuad',
                complete: function () {
                    welcomeModal.style.display = 'none';
                }
            });

            if (withMusic) {
                // 尝试播放音乐
                backgroundMusic.volume = 0.5;
                backgroundMusic.play().catch(e => {
                    console.log('音乐播放失败:', e);
                });
            }

            init();
            setTimeout(showNextPanel, 500);
        }

        // 初始化欢迎模态框动画
        anime({
            targets: modalContent,
            scale: [0, 1],
            opacity: [0, 1],
            duration: 600,
            easing: 'easeOutElastic(1, .8)'
        });

        // 事件监听
        confirmMusicBtn.addEventListener('click', () => {
            startAnimation(true);
        });

        cancelMusicBtn.addEventListener('click', () => {
            startAnimation(false);
        });

        restartBtn.addEventListener('click', () => {
            if (!isAnimationStarted) return;
            init();
            setTimeout(showNextPanel, 500);
        });

        pauseBtn.addEventListener('click', () => {
            if (!isAnimationStarted) return;
            isPaused = !isPaused;
            if (!isPaused) {
                showNextPanel();
            }
        });

        // 启动背景动画
        animateBackground(0);
        animatePanels();

        // 窗口大小变化时重新初始化
        window.addEventListener('resize', () => {
            resizeCanvas();
            if (isAnimationStarted) {
                init();
            }
        });
    </script>
</body>

</html>